<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wave {
				background-color: #5576ac;
				position: relative;
				margin-top: 2%;
				margin-left: 2%;
				border-radius: 50%;
				background-image: url(wave.png);
				background-size: 200% auto;
				background-repeat: no-repeat;
				width: 200px;
				height: 200px;
				background-position-y: calc(200px * 0.5 - 200px / 10);
				animation: move_wave 1s linear infinite;
				-webkit-animation: move_wave 1s linear infinite;
			}

			#wave>.txt {
				position: absolute;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				bottom: 0;
				font-weight: 700;
				color: #fff;
				font-size: calc(200px * 0.2);
				height: 100%;
			}

			#wave::before {
				content: "";
				display: block;
				position: absolute;
				width: 120%;
				height: 120%;
				;
				border: 2px solid #5576ac;
				top: calc(-10% - 2px);
				left: calc(-10% - 2px);
				border-radius: 50%;
			}

			@keyframes move_wave {
				0% {
					background-position-x: 100%
				}

				50% {
					background-position-x: 50%
				}

				100% {
					background-position-x: 0
				}
			}

			@-webkit-keyframes move_wave {
				0% {
					background-position-x: 100%
				}

				50% {
					background-position-x: 50%
				}

				100% {
					background-position-x: 0
				}
			}
		</style>
	</head>
	<body>
		<div id="wave">
			<div class="txt">50%</div>
		</div>
	</body>
</html>
